<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/swiper-bundle.css">
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
</head>

<body>
    <div class="warp">
        <!-- 搜索栏 -->
        <div class="search">
            <span>青岛</span>
            <input type="text">
            <i class="fa fa-comment-o fa-lg"></i>
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <!-- 轮播图 -->
            <div class="banner">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./img/banner1.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/banner2.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/banner3.jpg" alt="">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <!-- 开发语言 -->
            <div class="dev">
                <div class="devItem">
                    <img src="./img/1.png" alt="">
                    <span>html</span>
                </div>
                <div class="devItem">
                    <img src="./img/1.png" alt="">
                    <span>html</span>
                </div>
                <div class="devItem">
                    <img src="./img/1.png" alt="">
                    <span>html</span>
                </div>
                <div class="devItem">
                    <img src="./img/1.png" alt="">
                    <span>html</span>
                </div>
                <div class="devItem">
                    <img src="./img/1.png" alt="">
                    <span>html</span>
                </div>
            </div>
            <!-- 精品课程 -->
            <div class="title">
                <span>精品课程</span>
                <span class="all">查看全部></span>
            </div>
            <!-- 课程内容 -->
            <div class="course">
                <div class="item">
                    <div class="left">
                        <div class="logo">
                            <img src="./img/1.png" alt="">
                        </div>
                        <div class="desc">
                            <p>HTML</p>
                            <span>岳老师</span>
                            <span> 
                                <i class="fa fa-weixin fa-lg"></i>
                                wx:6666
                            </span>
                            <span>
                                <i class="fa fa-clock-o fa-lg" style="color: #666;"></i>
                                时间:9点
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <span>6</span>折
                    </div>
                </div>
                <div class="item">
                    <div class="left">
                        <div class="logo">
                            <img src="./img/1.png" alt="">
                        </div>
                        <div class="desc">
                            <p>HTML</p>
                            <span>岳老师</span>
                            <span> 
                                <i class="fa fa-weixin fa-lg"></i>
                                wx:6666
                            </span>
                            <span>
                                <i class="fa fa-clock-o fa-lg" style="color: #666;"></i>
                                时间:9点
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <span>6</span>折
                    </div>
                </div>
                <div class="item">
                    <div class="left">
                        <div class="logo">
                            <img src="./img/1.png" alt="">
                        </div>
                        <div class="desc">
                            <p>HTML</p>
                            <span>岳老师</span>
                            <span> 
                                <i class="fa fa-weixin fa-lg"></i>
                                wx:6666
                            </span>
                            <span>
                                <i class="fa fa-clock-o fa-lg" style="color: #666;"></i>
                                时间:9点
                            </span>
                        </div>
                    </div>
                    <div class="right">
                        <span>6</span>折
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部导航 -->
        <div class="footer">
            <div class="footItem">
                <i class="fa fa-camera-retro fa-lg"></i>
                <span>我的</span>
            </div>
            <div class="footItem">
                <i class="fa fa-camera-retro fa-lg"></i>
                <span>我的</span>
            </div>
            <div class="footItem">
                <i class="fa fa-camera-retro fa-lg"></i>
                <span>我的</span>
            </div>
            <div class="footItem">
                <i class="fa fa-camera-retro fa-lg"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    <script src="js/rem.js"></script>
    <script src="js/swiper-bundle.js"></script>
    <script>
        window.onload = function () {
            var swiper = new Swiper(".mySwiper", {
                loop: true,
                autoplay: true,
                slidesPerView: 1,
                pagination: {
                    el: ".swiper-pagination",
                },
            });
        }
    </script>
</body>

</html>